<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<h1>实现路由案例</h1>
			<!-- 2.定义路由标签
			 1-a标签1说明
			 标签说明:a标签 超链接标签
			 href属性:请求跳转的地址
			 <a href="http://www.baidu.com">百度</a>
			 
			 2-路由标签说明
			 router-link 解析为a标签
			 to 解析之后变成 href属性
			 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/welcome">欢迎页面</router-link>
			<!-- 3.指定路由填充位(占位符)
			  需要给组件一个展现的位置,需要提前定义
			  -->
			<router-view></router-view>
		</div>

		<!-- 定义template标签 -->
		<template id="homeTem">
			<div>
				<h1>这里是系统首页</h1>
			</div>
		</template>

		<template id="welcomeTem">
			<div>
				<h1>欢迎使用组件</h1>
			</div>
		</template>
		<!-- 1.引入JS路由需要依赖vue 注意顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>

		<script>
			<!-- 4.封装路由对象 -->
			let HomeCom = {
				temolate: "#homeTem"
			}

			let Welcome = {
				template: "#welcomeTem"
			}

			let router = new VueRouter({
				//routes 定义请求与组件的映射关系
				routes: [{
						path: "/home",
						component: HomeCom
					},
					{
						path: "/welcome",
						component: Welcome
					}
				]
			})
			<!-- 5.实现路由对象的绑定 -->
			const app = new Vue({
				el: "#app",
				// router: router
				router
			})
		</script>
	</body>
</html>
